<template>
  <el-drawer
      size="50%"
      title="自定义事件"
      direction="rtl"
      :model-value="true">
    <div class="form-wrapper">
      <el-form class="custom-form" ref="form" :rules="rules" :model="form" label-width="80px" label-position="top">
        <el-form-item label="事件CODE" prop="code">
          <el-input class="custom-input custom-input-name"
                    v-model="form.code"
                    type="text"
                    maxlength="10"
                    :show-word-limit="true">
          </el-input>
        </el-form-item>

        <el-form-item label="事件名称" prop="name">
          <el-input class="custom-input custom-input-name"
                    v-model="form.name"
                    type="text"
                    maxlength="10"
                    :show-word-limit="true">
          </el-input>
        </el-form-item>

        <el-form-item label="类型" prop="type">
          <el-input class="custom-input custom-input-name"
                    v-model="form.type"
                    type="text"
                    maxlength="10"
                    :show-word-limit="true">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="form-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {SwitchExecutiveMode} from '@/nodes/switch/switchConfig'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: true,
    },
    dialogData: {},
  },

  data() {
    return {
      form: {
        name: '',
        wait: {
          value: '',
          unit: 'minute',
        },
      },
      SwitchExecutiveMode,
      rules: {
        name: [
          {
            required: true
          }
        ],
        wait: [
          {
            required: true
          }
        ]
      }
    }
  },

  mounted() {
    if (this.dialogData && Object.keys(this.dialogData).length) {
      this.form = this.dialogData
    }
  },

  methods: {
    handleCancel() {
      this.$emit('cancel')
    },

    handleConfirm() {
      this.$emit("confirm", this.form)
      this.handleCancel()
    },
  }
}
</script>

<style scoped lang="scss">
.form-wrapper {
  width: 100%;
  height: 100%;
  padding: 20px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}

.custom-input-name {
  width: 440px;
}

.custom-input-anchor-input {
  width: 104px;
}

.custom-form {
  flex: 1;
}

.form-footer {
  display: flex;
  justify-content: flex-end;
}

.wait-input {
  display: flex;
  align-items: center;
  word-break: keep-all;

  >div {
    margin-right: 6px;
  }

  //.label-left {
  //  margin-right: 6px;
  //}
  //
  //.label-right{
  //  margin-left: 6px;
  //}
}
</style>
